<template>
  <div class="user-management">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="用户编号">
        <el-input v-model="searchForm.userId" placeholder="请输入用户编号"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名">
        <el-input v-model="searchForm.userName" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="searchForm.account" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="居住地址">
        <el-input v-model="searchForm.address" placeholder="请输入居住地址"></el-input>
      </el-form-item>
      <el-form-item label="用户性别">
        <el-select v-model="searchForm.gender" placeholder="请选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="searchForm.phone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="所属组织">
        <el-input v-model="searchForm.organization" placeholder="请输入所属组织"></el-input>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="在职" value="1"></el-option>
          <el-option label="离职" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮组 -->
    <div class="operation-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <el-button icon="el-icon-edit" @click="handleEdit">编辑</el-button>
      <el-button type="primary" plain @click="handleImport">导入</el-button>
      <el-button type="primary" plain @click="handleExport">导出</el-button>
      <el-button type="success" plain @click="handleEnable">启用</el-button>
      <el-button type="danger" plain @click="handleDisable">禁用</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="employeeId"
        label="员工编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="organization"
        label="组织"
        width="100">
      </el-table-column>
      <el-table-column
        prop="position"
        label="职务"
        width="100">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="60">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="居住地址">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
            {{ scope.row.status === '1' ? '在职' : '离职' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleChangeStatus(scope.row)">
            {{ scope.row.status === '1' ? '禁用' : '启用' }}
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserManagement',
  data() {
    return {
      searchForm: {
        userId: '',
        userName: '',
        account: '',
        address: '',
        gender: '',
        phone: '',
        organization: '',
        status: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    resetForm() {
      this.searchForm = {
        userId: '',
        userName: '',
        account: '',
        address: '',
        gender: '',
        phone: '',
        organization: '',
        status: ''
      }
    },
    handleAdd() {
      // 实现新增逻辑
    },
    handleEdit(row) {
      // 实现编辑逻辑
    },
    handleView(row) {
      // 实现查看逻辑
    },
    handleDelete(row) {
      // 实现删除逻辑
    },
    handleImport() {
      // 实现导入逻辑
    },
    handleExport() {
      // 实现导出逻辑
    },
    handleEnable() {
      // 实现批量启用逻辑
    },
    handleDisable() {
      // 实现批量禁用逻辑
    },
    handleChangeStatus(row) {
      // 实现状态变更逻辑
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 实现数据获取逻辑
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}
.search-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.operation-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
